<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scale缩放</title>
  </head>
  <style>
    /* 
    缩放scale
      1.1 - 它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置
      1.2 - 缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
      1.3 **如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
    
     */
    .div1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 100px auto;
      transition: transform 2s;
      /* 
      transform-orgin:center center
       */
      transform-origin: left top;
    }

    .div1:hover {
      transform: scale(2);
    }
  </style>

  <body>
    <div class="div1">div1</div>
  </body>

</html>